<template>
    <el-form style="max-width: 600px;" :model="registerParm" :rules="rules" label-width="auto" status-icon size="large">
        <el-form-item :label="$t('loginView.userName')" prop="username">
            <el-input v-model="registerParm.username" :placeholder="$t('loginView.registerUserNameInput')" aria-autocomplete="none" clearable />
        </el-form-item>

        <el-form-item :label="$t('loginView.password')" prop="password">
            <el-input v-model="registerParm.password" show-password type="password" :placeholder="$t('loginView.passwordInput')" clearable/>
        </el-form-item> 

        <el-form-item :label="$t('loginView.realname')" prop="realname">
            <el-input v-model="registerParm.realname" :placeholder="$t('loginView.realnameInput')" aria-autocomplete="none" clearable/>
        </el-form-item>

        <el-form-item :label="$t('loginView.email')" prop="email">
            <el-input v-model="registerParm.email" :placeholder="$t('loginView.emailInput')" aria-autocomplete="none" clearable/>
        </el-form-item>

        <el-form-item :label="$t('loginView.code2')">
            <div style="width: 300px;margin-right: 17px;"><el-input v-model="registerParm.code" :placeholder="$t('loginView.codeInputEmpty')" aria-autocomplete="none" clearable/></div>
            <el-button :disabled="remainingTime>0" @click="sendEmail()" color="#008080" :dark="isdark" plain>{{remainingTime>0?remainingTime:$t('loginView.getCode')}}</el-button>
        </el-form-item>

        <div style="display: flex; justify-content: center;">
            <el-button class="buttom" @click="doRegister()" color="#626aef" :dark="isdark" plain>{{$t('loginView.register')}}</el-button>
        </div>
    </el-form>
</template>


<script setup lang="ts">
import useRegister from '@/hooks/useRegister'
import { ElMessage } from 'element-plus';
import { defineProps,ref } from 'vue';
defineProps(['isdark'])
const {rules,registerParm,getEmailCode,doRegister} = useRegister()
const remainingTime = ref(0)

let timer = null
const startTimer = () => {
    timer = setInterval(() => {
        remainingTime.value -= 1
        if (remainingTime.value <= 0) {
            clearInterval(timer)
        }
    }, 1000)
}


const sendEmail=()=>{
    if(registerParm.value.email===""){
        ElMessage({
            message:"请输入邮箱",
            grouping:true,
            type:'error'
        })
    }else{
        getEmailCode()
        remainingTime.value=60
        startTimer()
    }
}
</script>

<style scoped>
    .text{
        margin-top: 15px;
    }
    .buttom{
        font-family: inherit;
        width: 150px;
    }

    .input {
        
        box-shadow: var(--el-box-shadow-light);
        font-size: 15px;
        width: 70%;
        height: 30px;
        
    }
</style>